// 在滑动时显示元素
const aboutSection = document.querySelector(".section-about");
const imgs = document.querySelectorAll(".about__img--item");
const logo = document.querySelector(".logo");

const EffectOnImg = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  entry.target.classList.remove("img-effect");
  observer.unobserve(entry.target);
};

const imgObsOption = {
  root: null,
  threshold: 0.1,
};

const imgObserver = new IntersectionObserver(EffectOnImg, imgObsOption);

imgs.forEach((i) => {
  i.classList.add("img-effect");
  imgObserver.observe(i);
});

// 在滑动时显示Logo

const EffectOnLogo = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  console.log(entry.isIntersecting);
  logo.classList.add("logo-effect");
  observer.unobserve(entry.target);
};

const logoObsOption = {
  root: null,
  threshold: 0.3,
};

const logoObserver = new IntersectionObserver(EffectOnLogo, logoObsOption);

logoObserver.observe(aboutSection);

// 在滑动时切换图片

const phaseObserver = new IntersectionObserver((entries) => {
  for (let i = entries.length - 1; i >= 0; i--) {
    const entry = entries[i];
    if (entry.isIntersecting) {
      document.querySelectorAll("[data-img]").forEach((img) => {
        img.classList.remove("show");
      });
      const img = document.querySelector(entry.target.dataset.imgToShow);
      img?.classList.add("show");
      break;
    }
  }
});

document.querySelectorAll("[data-img-to-show]").forEach((section) => {
  phaseObserver.observe(section);
});

// FAQ手风琴效果
const accordionQuestions = document.querySelectorAll(".FAQ__list--item");

const showFAQDescription = function (e) {
  e.preventDefault();
  const targetItem = e.target.closest(".FAQ__list--item");
  accordionQuestions.forEach((a) => a.classList.add("hidden"));
  targetItem.classList.toggle("hidden");
  // targetIcon.classList.toggle("icon-add");
  // targetIcon.classList.toggle("icon-minus");
};

accordionQuestions.forEach((btn) => {
  btn.addEventListener("click", showFAQDescription.bind(this));
});
